<template>
  <div class='hyyy'>
    <div class="banner">
      <img :src = 'bannerImg'>
    </div>
    <div class="content">
      <div class="hyyy-content">
        <h2>应用的行业</h2>
        <h3>Applied Industry</h3>
      </div>
      <ul class="hyyy-list">
        <li v-for='(item , index ) in cpList' :key='index'>
          <!-- <router-link tag='a' :to='item.to' > -->
            <div>
              <img :src='item.icon' alt="">
              <h5>{{item.title}}</h5>
              <p>{{item.text}}</p>
              <span>More</span>
            </div>
          <!-- </router-link> -->
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Hyyy',
  data () {
    return {
      bannerImg: require('../assets/images/hyyyBanner.png'),
      cpList: [
        {
          icon: require('../assets/images/hyyy01.png'),
          title: '应急指挥',
          text: '在应急指挥中采用高清的视频和语音对讲，能够将故障现场的视频调度到指挥中心，辅助做出更好的应急决策。',
          to: 'yjzh'
        },
        {
          icon: require('../assets/images/hyyy02.png'),
          title: '智慧农业',
          text: '智慧农业是智慧经济主要的组成部分，是发展中国家消除贫困、实现后发优势、经济发展后来居上的主要途径。',
          to: 'zhny'
        },
        {
          icon: require('../assets/images/hyyy03.png'),
          title: '城市管理',
          text: '智慧社区是用物联网、云计算、移动互联网等新一代技术的集成应用，为居民社区提供安全，舒适智慧化的生活环境',
          to: 'csgl'
        },
        {
          icon: require('../assets/images/hyyy04.png'),
          title: '水文水利',
          text: '依托中国气象局精细化权威气象降水预报数据，结合降雨~洪水预报模型，开展短期、中期降雨洪水一体化预报服务。',
          to: 'swsl'
        },
        {
          icon: require('../assets/images/hyyy05.png'),
          title: '海洋/码头',
          text: '码头是海边、江河边专供轮船或渡船停泊，让乘客上下、货物装卸的建筑物。通常见于水陆交通发达的商业城市。',
          to: 'yjzh'
        },
        {
          icon: require('../assets/images/hyyy06.png'),
          title: '校园/科普',
          text: '科学普及简称科普，又称大众科学或者普及科学，接受和参与的方式向普通大众介绍自然科学和社会科学知识的活动。',
          to: 'zhny'
        },
        {
          icon: require('../assets/images/hyyy07.png'),
          title: '建筑智能',
          text: '指通过将建筑物的结构、系统、服务进行最优化组合，从而为用户提供一个高效、舒适、便利的人性化建筑环境。',
          to: 'csgl'
        },
        {
          icon: require('../assets/images/hyyy08.png'),
          title: '气象综合应用',
          text: '应用气象学是将气象学的原理、方法和成果应用于农业、水文、航海、航空、军事、医疗等方面，形成的边缘性学科。',
          to: 'swsl'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.hyyy{
  .banner{
    width: 100%;
    min-width: 1200px;
    img{
      width: 100%;
    }
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    .hyyy-content{
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
        margin-top: 50px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
    }
    .hyyy-list{
      overflow: hidden;
      margin-bottom: 80px;
      li{
        box-sizing: border-box;
        text-align: center;
        width: 230px;
        height: 350px;
        float: left;
        margin-right: 93px;
        background: #ffffff;
        border-radius: 50px;
        border:1px solid rgba(238,238,238,1);
        cursor: pointer;
        margin-top: 50px;
        &:nth-of-type(4n){
          margin-right: 0;
        }
        div{
          padding: 30px 24px;
          img{
            width: 60px;
            height: 60px;
          }
          h5{
            position: relative;
            margin:18px 0;
            color: #333333;
            font-size: 26px;
            &:after{
              content: '';
              position: absolute;
              bottom:-13px;
              left: 50%;
              transform: translateX(-50%);
              width: 50px;
              height: 2px;
              background: #999999;
            }
          }
          p{
            color: #666666;
            height: 120px;
            font-size: 14px;
            line-height:30px;
            text-align: left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            letter-spacing: 0px;
            margin-bottom: 24px;
          }
          span{
            margin-bottom: 40px;
            color:#4EBDD5;
            border-bottom:solid 1px #4EBDD5;
          }
        }
        &:hover{
          margin-top: 46px;
          box-shadow:0px 2px 13px 2px rgba(78, 189, 213, 0.08);
        }
      }
    }
  }
}
</style>
